<style rel="stylesheet/scss" lang="scss" scoped>
.row_wrap{
    display: flex;
    justify-content: center;
    .box-card{
        padding: 20px;
        margin-bottom: 20px;
        width: 90%;

        .base_attr_wrap{
            display: flex;
            .label{
                flex: 1;
            }
            .select_vals {
                display: flex;
                justify-content: flex-start;
                flex: 8;

            }
            .show_desc {
                display: flex;
                justify-content: flex-start;
                flex: 1;
                margin-left: 10px;
            }
        }

        .success {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            i{
                font-size: 100px;
                color: #67C23A;
                margin-bottom: 20px;
            }
        }

        .btn{
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
    }

    .card_wrap{
        display: flex;
        flex-wrap: wrap;
        .box_card_imgs{
            display: flex;
            justify-content: center;
            width: 170px;
            margin: 10px;

            .imgs_check{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 5px;
                height: 32px;
                margin-top: 10px;
                .radio_box{
                    .wrap{
                        display: flex;
                        .r{
                            display: flex;
                            align-items: center;
                            height: 30px;
                            margin-right: 5px;
                        }
                        .t{
                            display: flex;
                        }
                    }
                }
            }
        }
    }
}

</style>

<template>
    <div>
        <div class="container">
            <el-card shadow="hover" style="padding:0">

                <el-col :span="24" style="margin-top: 20px">
                    <el-steps :active="step" finish-status="success" align-center>
                        <el-step title="基本信息"></el-step>
                        <el-step title="规格参数"></el-step>
                        <el-step title="销售属性"></el-step>
                        <el-step title="SKU信息"></el-step>
                        <el-step title="保存完成"></el-step>
                    </el-steps>
                    <el-divider></el-divider>
                </el-col>

                <!-- SPU 基本信息 -->
                <el-col :span="24" v-show="step == 0" class="row_wrap">
                    <el-card class="box-card">
                        <el-form ref="spuForm" :model="spu" label-width="120px" :rules="spuFormRules">
                            <el-form-item label="商品名称" prop="spuName">
                                <el-input v-model="spu.spuName" placeholder="" style="width: 80%;"></el-input>
                            </el-form-item>
                            <el-form-item label="商品描述" prop="spuDescription">
                                <el-input v-model="spu.spuDescription" placeholder="" style="width: 80%;"></el-input>
                            </el-form-item>
                            <el-form-item label="选择分类" prop="cateId">
                            </el-form-item>
                            <el-form-item label="选择品牌" prop="brandId">
                            </el-form-item>
                            <el-form-item label="商品重量" prop="weight">
                                <el-input-number style="width: 40%" v-model.number="spu.weight" placeholder="Kg" :min="0" :precision="3" :step="0.1"></el-input-number>
                            </el-form-item>
                            <el-form-item label="设置积分" prop="bounds">
                                <label>金币</label>
                                <el-input-number
                                    style="width:130px"
                                    placeholder="金币"
                                    v-model="spu.bounds.buyBounds"
                                    :min="0"
                                    controls-position="right"
                                ></el-input-number>
                                <label style="margin-left:15px">成长值</label>
                                <el-input-number
                                    style="width:130px"
                                    placeholder="成长值"
                                    v-model="spu.bounds.growBounds"
                                    :min="0"
                                    controls-position="right"
                                >
                                <template slot="prepend">成长值</template>
                                </el-input-number>
                            </el-form-item>
                            <el-form-item label="商品介绍" prop="decript">
                            </el-form-item>
                            <el-form-item label="商品图集" prop="images">
                            </el-form-item>

                            <el-form-item>
                                <el-button type="success" @click="collectSpuNext">下一步：设置规格参数</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>

                <!-- 设置规格参数 -->
                <el-col :span="24" v-show="step == 1" class="row_wrap">
                    <el-card class="box-card">

                        <el-tabs tab-position="left" style="width:98%; margin-bottom: 20px">
                            <el-tab-pane
                            :label="group.attrGroupName"
                            v-for="(group, gidx) in dataResp.attrGroups"
                            :key="group.attrGroupId">

                                <!-- 遍历属性,每个tab-pane对应一个表单，每个属性是一个表单项  spu.baseAttrs[0] = [{attrId:xx,val:}]-->
                                <el-form ref="form" :model="spu">
                                    <el-form-item v-for="(attr,aidx) in group.attrs" :key="attr.id">
                                        <div class="base_attr_wrap">
                                            <div class="label">
                                                {{attr.attrName}}
                                            </div>
                                            <div class="select_vals">
                                                <el-select
                                                    v-model="dataResp.baseAttrs[gidx][aidx].attrValues"
                                                    :multiple="attr.valueType == 1"
                                                    filterable
                                                    allow-create
                                                    default-first-option
                                                    placeholder="请选择或输入值"
                                                    style="width: 100%">
                                                        <el-option
                                                            v-for="(val,vidx) in attr.valueSelect.split(';')"
                                                            :key="vidx"
                                                            :label="val"
                                                            :value="val">
                                                        </el-option>
                                                </el-select>
                                            </div>
                                            <div class="show_desc">
                                                <el-checkbox
                                                    v-model="dataResp.baseAttrs[gidx][aidx].showDesc"
                                                    :true-label="1"
                                                    :false-label="0"
                                                >快速展示</el-checkbox>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-form>
                                <el-button type="primary">添加属性</el-button>
                            </el-tab-pane>
                        </el-tabs>
                        <el-button type="primary" @click="step = 0">上一步</el-button>
                        <el-button type="success" @click="generateSaleAttrs">下一步：设置销售属性</el-button>
                    </el-card>
                </el-col>

                <!-- 设置销售属性 -->
                <el-col :span="24" v-show="step == 2" class="row_wrap">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>选择销售属性</span>
                        </div>

                        <el-form ref="saleform" :model="spu">
                            <el-form-item
                            :label="attr.attrName"
                            v-for="(attr,aidx) in dataResp.saleAttrs"
                            :key="attr.attrId">

                                <el-input
                                    v-model="dataResp.tempSaleAttrs[aidx].attrId"
                                    type="hidden"
                                    v-show="false"
                                ></el-input>

                                <el-checkbox-group v-model="dataResp.tempSaleAttrs[aidx].attrValues">
                                    <template v-if="dataResp.saleAttrs[aidx].valueSelect">
                                        <el-checkbox
                                        :label="val"
                                        v-for="val in dataResp.saleAttrs[aidx].valueSelect.split(';')"
                                        :key="val"
                                        ></el-checkbox>
                                    </template>
                                    <div style="margin-left:20px;display:inline">
                                        <el-button
                                            v-show="!inputVisible[aidx].view"
                                            class="button-new-tag"
                                            size="mini"
                                            @click="showInput(aidx)"
                                        >+自定义</el-button>
                                        <el-input
                                            v-show="inputVisible[aidx].view"
                                            v-model="inputValue[aidx].val"
                                            :ref="'saveTagInput'"
                                            size="mini"
                                            style="width:150px"
                                            @keyup.enter.native="handleInputConfirm(aidx)"
                                            @blur="handleInputConfirm(aidx)"
                                        ></el-input>
                                    </div>
                                </el-checkbox-group>


                            </el-form-item>
                        </el-form>
                        <el-button type="primary" @click="step = 1">上一步</el-button>
                        <el-button type="success" @click="generateSkus">下一步：设置SKU信息</el-button>
                    </el-card>
                    <!-- <el-card class="box-card">
                        <el-button type="primary" @click="step = 1">上一步</el-button>
                        <el-button type="success" @click="generateSkus">下一步：设置SKU信息</el-button>
                    </el-card> -->
                </el-col>

                <!-- 设置SKU信息，并保存商品信息 -->
                <el-col :span="24" v-show="step == 3" class="row_wrap">
                    <el-card class="box-card">

                        <el-table :data="spu.skus" style="width: 100%">
                            <el-table-column label="属性组合">
                                <el-table-column
                                    :label="item.attrName"
                                    v-for="(item, index) in dataResp.tableAttrColumn"
                                    :key="item.attrId"
                                >
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{
                                            scope.row.attr[index].attrValue
                                        }}</span>
                                    </template>
                                </el-table-column>
                            </el-table-column>

                            <el-table-column label="商品名称" prop="skuName">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.skuName"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="标题" prop="skuTitle">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.skuTitle"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="副标题" prop="skuSubtitle">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.skuSubtitle"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="价格" prop="price">
                                <template slot-scope="scope">
                                    <el-input-number v-model="scope.row.price" :precision="2" :step="0.01" :min="0.00" style="width: 100%"></el-input-number>
                                </template>
                            </el-table-column>

                            <el-table-column type="expand">
                                <template slot-scope="scope">
                                    <el-row>
                                        <el-col :span="24">
                                            <label style="display:block;float:left">选择图集 或</label>
                                            <multi-upload
                                                style="float:left;margin-left:10px;"
                                                :showFile="false"
                                                :listType="'text'"
                                                v-model="uploadImages"
                                            ></multi-upload>
                                        </el-col>
                                        <el-col :span="24">
                                            <el-divider></el-divider>
                                        </el-col>
                                        <el-col :span="24">
                                            <div class="card_wrap">
                                                <el-card
                                                    class="box_card_imgs"
                                                    v-for="(img,index) in spu.images"
                                                    :key="index">
                                                     <el-image
                                                        style="width:160px;height:120px"
                                                        :src="img"
                                                        :preview-src-list="spu.images"
                                                        fit="fill"></el-image>
                                                    <div class="imgs_check">
                                                        <div class="chk_box">
                                                            <el-checkbox
                                                                v-model="scope.row.images[index].imgUrl"
                                                                :true-label="img"
                                                                false-label></el-checkbox>
                                                        </div>
                                                        <div class="radio_box">
                                                            <el-tag v-if="scope.row.images[index].defaultImg == 1">
                                                                <div class="wrap">
                                                                    <div class="r">
                                                                        <input
                                                                        type="radio"
                                                                        checked
                                                                        :name="scope.row.skuName"
                                                                        @change="checkDefaultImg(scope.row,index,img)"/>
                                                                    </div>
                                                                    <div class="t">设为默认</div>
                                                                </div>
                                                            </el-tag>
                                                            <el-tag v-else>
                                                                <div class="wrap">
                                                                    <div class="r">
                                                                        <input
                                                                        type="radio"
                                                                        :name="scope.row.skuName"
                                                                        @change="checkDefaultImg(scope.row,index,img)"/>
                                                                    </div>
                                                                    <div class="t">设为默认</div>
                                                                </div>
                                                            </el-tag>
                                                        </div>
                                                    </div>
                                                </el-card>
                                            </div>
                                        </el-col>
                                    </el-row>

                                     <!-- 折扣，满减，会员价 -->
                                    <el-form :model="scope.row">
                                        <el-row>
                                            <el-col :span="24">
                                                <el-form-item label="设置折扣">
                                                    <label>满</label>
                                                    <el-input-number style="width:160px" :min="0" controls-position="right" v-model="scope.row.fullCount" ></el-input-number>
                                                    <label>件</label>

                                                    <label style="margin-left:15px;">打</label>
                                                    <el-input-number style="width:160px" v-model="scope.row.discount" :precision="2" :max="1" :min="0" :step="0.01" controls-position="right" ></el-input-number>
                                                    <label>折</label>

                                                    <el-checkbox v-model="scope.row.countStatus" :true-label="1" :false-label="0" style="margin-left: 10px">可叠加优惠</el-checkbox>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="24">
                                                <el-form-item label="设置满减">
                                                    <label>满</label>
                                                    <el-input-number style="width:160px" v-model="scope.row.fullPrice" :precision="2" :min="0" :step="0.01" controls-position="right" ></el-input-number>

                                                    <label>元</label>
                                                    <label style="margin-left:15px;">减</label>

                                                    <el-input-number style="width:160px" v-model="scope.row.reducePrice" :precision="2" :min="0" :step="0.01" controls-position="right" ></el-input-number>
                                                    <label>元</label>

                                                    <el-checkbox v-model="scope.row.priceStatus" :true-label="1" :false-label="0" style="margin-left: 10px">可叠加优惠</el-checkbox>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="24">
                                                <el-form-item label="设置会员价" v-if="scope.row.memberPrice.length>0">
                                                    <br/>
                                                    <el-form-item v-for="(mp, mpidx) in scope.row.memberPrice" :key="mp.id"  style="margin-bottom: 10px">
                                                        {{mp.name}}
                                                        <el-input-number style="width:160px" v-model="scope.row.memberPrice[mpidx].price" :precision="2" :min="0" :step="0.01" controls-position="right" ></el-input-number>
                                                    </el-form-item>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                    </el-form>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="btn">
                            <div class="next">
                                <el-button type="primary" @click="step = 2">上一步</el-button>
                                <el-button type="success" @click="submitSkus">下一步：保存商品信息</el-button>
                            </div>
                            <div class="function">
                                <el-button type="success" @click="visibleBatchSkuPrice = true" v-if="spu.skus.length > 0">批量设置价格</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <!-- 保存成功 -->
                <el-col :span="24" v-show="step == 4" class="row_wrap">
                    <el-card class="box-card">
                        <div class="success">
                            <i class="el-icon-circle-check"></i>
                            <el-button type="primary" @click="addAgian">保存成功，继续添加</el-button>
                        </div>
                    </el-card>
                </el-col>

            </el-card>

            <!-- 批量设置价格 -->
            <el-dialog title="批量设置价格" :visible.sync="visibleBatchSkuPrice" :close-on-click-modal="false">
                <el-form ref="searchForm" :inline="false" size="medium" label-width="80px">
                    <el-form-item label="进货价">
                        <el-input-number v-model="batchPrice" :precision="2" :step="0.01" :min="0.00" style="width: 50%"></el-input-number>
                    </el-form-item>
                    <el-form-item label="市场价">
                        <el-input-number v-model="batchPrice" :precision="2" :step="0.01" :min="0.00" style="width: 50%"></el-input-number>
                    </el-form-item>
                    <el-form-item label="销售价">
                        <el-input-number v-model="batchPrice" :precision="2" :step="0.01" :min="0.00" style="width: 50%"></el-input-number>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="visibleBatchSkuPrice = false">取 消</el-button>
                    <el-button @click="handleSetBatchSkuPrice" type="primary">提 交</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            catePathSub: null,
            brandIdSub: null,
            uploadImages: [],

            step: 0,

            visibleBatchSkuPrice: false,
            batchPrice: 0,

            // 要提交的数据
            spu: {
                spuName: "",
                spuDescription: "",
                cateId: null,
                brandId: null,
                weight: "",
                publishStatus: 0,
                bounds: {
                    buyBounds: 0,
                    growBounds: 0
                },              // 积分
                decript: [],    // 商品详情
                images: [],     // 商品图集，最后sku也可以新增
                baseAttrs: [],  // 基本属性
                skus: []        // 所有sku信息
            },
            spuFormRules: {

            },

            // 后台返回的所有数据
            dataResp: {
                attrGroups: [],
                baseAttrs: [],
                saleAttrs: [],
                tempSaleAttrs: [],
                tableAttrColumn: [],
                memberLevels: [],
                steped: [false, false, false, false, false]
            },
            inputVisible: [],
            inputValue: []
        };
    },
    mounted() {
        this.$nextTick(function() {
            // 订阅消息，当分类级联发生变动，级联组件发布订阅消息，获取分类ID
            this.catePathSub = PubSub.subscribe("catePathId", (msg, val) => {
                if(val.length > 0) {
                    this.spu.cateId = val[val.length - 1];
                }
            });
            // 订阅消息，品牌组件发布订阅消息，获取品牌ID
            this.brandIdSub = PubSub.subscribe("brandId", (msg, val) => {
                this.spu.brandId = val;
            });
        });
    },
    computed: {
        // 实现深度监听对象
        spuImages() {
            return this.spu.images
        }
    },
    watch: {
        /**
         * 解决，用户到SKU设置后，返回到第一步添加图集，
         * 造成spu.images有值，spu.skus.images扩展字段没值，导致报错
         */
        spuImages(val) {
            let imgArr = Array.from(new Set(this.spu.images.concat(val)));

            this.spu.skus.forEach((item, index) => {
                let len = imgArr.length - this.spu.skus[index].images.length; //还差这么多
                if (len > 0) {
                    let imgs = new Array(len);
                    imgs = imgs.fill({ imgUrl: "", defaultImg: 0 });
                    this.spu.skus[index].images = item.images.concat(imgs);
                }
            });
        },
        /**
         * SKU中添加图片
         */
        uploadImages(val) {
            //扩展每个skus里面的imgs选项
            let imgArr = Array.from(new Set(this.spu.images.concat(val)));

            //{imgUrl:"",defaultImg:0} 由于concat每次迭代上次，有很多重复。所以我们必须得到上次+这次的总长
            this.spu.skus.forEach((item, index) => {
                let len = imgArr.length - this.spu.skus[index].images.length; //还差这么多
                if (len > 0) {
                    let imgs = new Array(len);
                    imgs = imgs.fill({ imgUrl: "", defaultImg: 0 });
                    this.spu.skus[index].images = item.images.concat(imgs);
                }
            });

            this.spu.images = imgArr; //去重
        }
    },
    methods: {
        handleSetBatchSkuPrice() {
            this.spu.skus.forEach(item => {
                item.price = this.batchPrice
            })
            this.visibleBatchSkuPrice = false
        },

        addAgian() {
            this.step = 0;
            this.resetSpuData();
        },

        /**
         * 录入SPU后下一步
         */
        collectSpuNext() {
            this.$refs.spuForm.validate(valid => {
                if (valid) {
                    this.step = 1;
                    this.showBaseAttrs()
                } else {
                    return false;
                }
            });
        },

        /**
         * 规格参数
         * 生成分组和分组属性
         */
        showBaseAttrs() {
            if (!this.dataResp.steped[0]) {
                this.$http({
                    url: `/product/pmsattrgroup/${this.spu.cateId}/withattr`,
                    method: "get",
                }).then(res => {
                    if (this.ResultMessage(res, false)) {
                        //先对表单的baseAttrs进行初始化
                        res.data.forEach(item => {
                            let attrArray = [];
                            if(item.attrs) {
                                item.attrs.forEach(attr => {
                                    attrArray.push({
                                        attrId: attr.id,
                                        attrValues: "",
                                        showDesc: attr.showDesc
                                    });
                                });
                                this.dataResp.baseAttrs.push(attrArray);
                            } else {
                                this.dataResp.baseAttrs.push([]);
                            }
                        });
                        this.dataResp.steped[0] = true;
                        this.dataResp.attrGroups = res.data;
                    }
                });
            }
        },

        /**
         * 把页面绑定的所有attr处理到spu里面
         */
        generateSaleAttrs() {
            this.spu.baseAttrs = [];
            this.dataResp.baseAttrs.forEach(item => {
                item.forEach(attr => {
                let { attrId, attrValues, showDesc } = attr;
                //跳过没有录入值的属性
                if (attrValues != "") {
                    if (attrValues instanceof Array) {
                    //多个值用;隔开
                    attrValues = attrValues.join(";");
                    }
                    this.spu.baseAttrs.push({ attrId, attrValues, showDesc });
                }
                });
            });
            this.step = 2;
            this.getShowSaleAttr();
        },

        /**
         * 生成销售属性
         */
        getShowSaleAttr(){
            if (!this.dataResp.steped[1]) {
                this.$http({
                    url: '/product/pmsattr/sale/list',
                    method: 'get',
                    params: {page: 1, limit: 500, cateId: this.spu.cateId}
                }).then(res => {
                    if (this.ResultMessage(res, false)) {
                        this.dataResp.saleAttrs = res.data.records

                        res.data.records.forEach(item => {
                            this.dataResp.tempSaleAttrs.push({
                                attrId: item.id,
                                attrValues: [],
                                attrName: item.attrName
                            });
                            this.inputVisible.push({ view: false });
                            this.inputValue.push({ val: "" });
                        });

                        this.dataResp.steped[1] = true;
                    }
                })
            }
        },

        /**
         * 生成SKU
         */
        generateSkus() {

            this.step = 3;

            let selectValues = [];
            this.dataResp.tableAttrColumn = [];

            this.dataResp.tempSaleAttrs.forEach(item => {
                if (item.attrValues.length > 0) {
                    // 收集销售属性值，进行笛卡尔积运算生成SKU组合
                    selectValues.push(item.attrValues);
                    // 销售属性列名称
                    this.dataResp.tableAttrColumn.push(item);
                }
            });

            //根据笛卡尔积运算进行生成sku组合
            let descartes = this.descartes(selectValues);
            console.log("SKU生成的组合", JSON.stringify(descartes));

            //有多少descartes就有多少sku
            let skus = [];
            descartes.forEach((descar, descaridx) => {
                let attrArray = []; //sku属性组
                descar.forEach((de, index) => {
                    //构造saleAttr信息
                    let saleAttrItem = {
                        attrId: this.dataResp.tableAttrColumn[index].attrId,
                        attrName: this.dataResp.tableAttrColumn[index].attrName,
                        attrValue: de
                    };
                    attrArray.push(saleAttrItem);
                });

                //先初始化几个images，后面的上传还要加
                let imgs = [];
                this.spu.images.forEach((img, idx) => {
                    imgs.push({ imgUrl: "", defaultImg: 0 });
                });

                //会员价，也必须在循环里面生成，否则会导致数据绑定问题
                let memberPrices = [];
                if (this.dataResp.memberLevels.length > 0) {
                    for (let i = 0; i < this.dataResp.memberLevels.length; i++) {
                        if (this.dataResp.memberLevels[i].priviledgeMemberPrice == 1) {
                            memberPrices.push({
                                id: this.dataResp.memberLevels[i].id,
                                name: this.dataResp.memberLevels[i].name,
                                price: 0
                            });
                        }
                    }
                }

                memberPrices = [
                    {id: 1, name: '1星', price: 0},
                    {id: 2, name: '2星', price: 0},
                    {id: 3, name: '3星', price: 0},
                    {id: 4, name: '4星', price: 0}
                ]

                // 判断如果之前有就用之前的值;
                let res = this.hasAndReturnSku(this.spu.skus, descar);
                if (res === null) {
                    skus.push({
                        attr: attrArray,
                        descar: descar,
                        images: imgs,

                        skuName: this.spu.spuName + " " + descar.join(" "),
                        skuTitle: this.spu.spuName + " " + descar.join(" "),
                        price: 0,
                        skuSubtitle: "",
                        fullCount: 0,
                        discount: 0,
                        countStatus: 0,
                        fullPrice: 0.0,
                        reducePrice: 0.0,
                        priceStatus: 0,
                        memberPrice: new Array().concat(memberPrices)
                    });
                } else {
                    skus.push(res);
                }
            });

            // SKU销售属性组合列表
            this.spu.skus = skus;

            // console.log("表列名：", JSON.stringify(this.dataResp.tableAttrColumn));
            // console.log("结果SKU：", JSON.stringify(this.spu.skus));
            // console.log("结果SKU：", JSON.stringify(this.spu));
        },

        /**
         * 提交信息
         */
        submitSkus() {
            console.log("~~~~~", JSON.stringify(this.spu));

            this.$confirm("将要提交商品数据，需要一小段时间，是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$http({
                    url: '/product/pmsspuinfo/save',
                    method: "post",
                    data: this.spu
                }).then(res => {
                    if (this.ResultMessage(res)) {
                        this.step = 4;
                    } else {
                        this.$notify({ title: '错误', message: res.msg, type: 'error' });
                    }
                }).catch(error => {
                    this.$notify({ title: '错误', message: error, type: 'error' });
                })
            }).catch(e => {
                this.$message({ type: "info", message: "已取消" });
            });
        },

        /**
         * 笛卡尔积运算，生成SKU销售组合
         */
        descartes(list) {
            //parent上一级索引;count指针计数
            var point = {};

            var result = [];
            var pIndex = null;
            var tempCount = 0;
            var temp = [];

            //根据参数列生成指针对象
            for (var index in list) {
                if (typeof list[index] == "object") {
                    point[index] = { parent: pIndex, count: 0 };
                    pIndex = index;
                }
            }

            //单维度数据结构直接返回
            if (pIndex == null) {
                return list;
            }

            //动态生成笛卡尔积
            while (true) {
                for (var index in list) {
                    tempCount = point[index]["count"];
                    temp.push(list[index][tempCount]);
                }

                //压入结果数组
                result.push(temp);
                temp = [];

                //检查指针最大值问题
                while (true) {
                    if (point[index]["count"] + 1 >= list[index].length) {
                        point[index]["count"] = 0;
                        pIndex = point[index]["parent"];
                        if (pIndex == null) {
                            return result;
                        }

                        //赋值parent进行再次检查
                        index = pIndex;
                    } else {
                        point[index]["count"]++;
                        break;
                    }
                }
            }
        },

        /**
         * 判断如果包含之前的sku的descar组合，就返回这个sku的详细信息；
         */
        hasAndReturnSku(skus, descar) {
            let res = null;
            if (skus.length > 0) {
                for (let i = 0; i < skus.length; i++) {
                    if (skus[i].descar.join(" ") == descar.join(" ")) {
                        res = skus[i];
                    }
                }
            }
            return res;
        },

        showInput(idx) {
            this.inputVisible[idx].view = true;
        },

        handleInputConfirm(idx) {
            let inputValue = this.inputValue[idx].val;
            if (inputValue) {
                if (!this.dataResp.saleAttrs[idx].valueSelect || this.dataResp.saleAttrs[idx].valueSelect == "") {
                    this.dataResp.saleAttrs[idx].valueSelect = inputValue;
                } else {
                    this.dataResp.saleAttrs[idx].valueSelect += ";" + inputValue;
                }
            }
            this.inputVisible[idx].view = false;
            this.inputValue[idx].val = "";
        },

        /**
         * SKU默认图片
         */
        checkDefaultImg(row, index, img) {
            //这个图片被选中了，
            row.images[index].imgUrl = img; //默认选中
            row.images[index].defaultImg = 1; //修改标志位;
            //修改其他人的标志位
            row.images.forEach((item, idx) => {
                if (idx != index) {
                row.images[idx].defaultImg = 0;
                }
            });
        },

        /**
         * 重置SPU
         */
        resetSpuData() {
            this.spu = {
                spuName: '',
                spuDescription: '',
                cateId: 0,
                brandId: null,
                weight: null,
                publishStatus: 0,
                decript: [],
                images: [],
                bounds: {
                    buyBounds: 0,
                    growBounds: 0
                },
                baseAttrs: [],
                skus: []
            }

            this.uploadImages = []

            this.$refs.brand.brandId = null
            this.$refs.category.paths = []
        }

    },

    /**
     * 生命周期 - 销毁之前
     */
    beforeDestroy() {
        PubSub.unsubscribe(this.catPathSub);
        PubSub.unsubscribe(this.brandIdSub);
    }
};
</script>
